<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>选择地址</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style scoped>
        .circle-s-a-head {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 44px;
            background-color: #ffffff;
            align-items: center;
            position: fixed;
            width: 100%;
        }

        .circle-s-a-left {
            height: 32px;
            border-radius: 16px;
            background-color: #F5F4F9;
            width: 280px;
            display: flex;
            align-items: center;
            margin-left: 16px;
        }

        .circle-s-a-right {
            margin-right: 16px;
        }

        .circle-s-a-left .city {
            padding: 0 10px 0 16px;
            border-right: 1px solid #D8D8D8;
        }

        .circle-s-a-left .iconfont {
            margin-left: 16px;
        }

        .circle-s-a-left input {
            padding-left: 10px;
        }

        .circle-s-a-address-list {
            padding-top: 344px;
        }

        .circle-s-a-address-list-no {
            padding-top: 44px;
        }

        .circle-s-a-address-list-name {
            color: #333333;
            font-size: 16px;
        }

        .circle-s-a-address-list-detail-address {
            color: #999999;
            font-size: 12px;
            padding-top: 10px;
        }

        .circle-s-a-address-list-item {
            padding: 16px;
            border-bottom: 0.5px solid #dddddd;
            /* background: yellow; */
        }

        body::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="circle-s-a-head">
            <div class="circle-s-a-left">
                <span class="city" @click="goRelative('area_select_win', '../select/')">{{selectedCityName}}</span>
                <span class="iconfont">&#xe71e;</span>
                <input id="inputId" type="search" maxlength="20" placeholder="请输入搜索关键词" v-model="keyword"
                    @input="onSearchChange">
            </div>
            <div class="circle-s-a-right" @click="cancel">取消</div>
        </div>

        <!--搜索附近列表-->
        <div :class="isLocation?'circle-s-a-address-list':'circle-s-a-address-list-no'">
            <div class="circle-s-a-address-list-item" v-for="(item, index) in searchPosList" :key="index"
                @click="selectAddressItem(item)">
                <div class="circle-s-a-address-list-name">{{item.name}}</div>
                <div class="circle-s-a-address-list-detail-address">{{item.address}}</div>
            </div>
        </div>
    </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script>
        apiready = function () {
            // var UIScrollPlayer = api.require('UIScrollPlayer');
            var aMap = api.require('aMap');

            var vm = new Vue({
                el: '.app',
                data: {
                    selectedCityName: "选择",
                    // kfUrl: '',
                    // unReadNum: 0,
                    keyword: '',
                    searchPosList: [],
                    currentLon: '',
                    currentLat: '',
                    isLocation: false,
                    // isClickCancel:false,

                },
                created() {

                },
                mounted() {
                    this.checkLocation()

                },
                methods: {
                    selectAddressItem(item) {
                        api.sendEvent({
                            name: "select-address",
                            extra: {
                                city: item,
                                // status:api.pageParam.status
                            }
                        });
                        api.closeWin();
                    },
                    cancel() {
                        this.keyword = ''
                    },
                    //搜索
                    onSearchChange() {
                        var vm = this
                        aMap.searchInCity({
                            city: vm.selectedCityName,
                            keyword: vm.keyword,
                            offset: 30,
                            page: 1,
                            sortrule: 0
                        }, function (ret) {
                            if (ret.status) {
                                vm.searchPosList = ret.pois
                            }
                        });
                    },
                    back() {
                        api.closeWin();
                    },

                    //选择城市
                    goRelative(url, relative) {
                        api.openWin({
                            name: url,
                            url: (relative || '') + url + ".html",
                            bounces: false,
                            pageParam: { title: 'circle-select-address' }
                        })
                    },

                    checkLocation() {
                        var vm = this
                        var resultList = api.hasPermission({
                            list: ['location']
                        });
                        var isPermit = resultList[0].granted;
                        if (isPermit) {
                            vm.isLocation = true
                            // 获取定位信息
                            vm.initLocation()
                        }

                    },

                    //搜附近
                    searchNear() {
                        var vm = this
                        aMap.searchNearby({
                            keyword: this.keyword,
                            lon: vm.currentLon,
                            lat: vm.currentLat,
                            radius: 2000,
                            offset: 20,
                            page: 1,
                            sortrule: 0
                        }, function (ret, err) {
                            console.log(JSON.stringify(ret))
                            if (ret.status) {
                                vm.searchPosList = ret.pois
                            }
                        });
                    },

                    initLocation() {
                        var vm = this;
                        aMap.open({
                            rect: {
                                x: 0,
                                y: 44,
                                w: api.winWidth,
                                h: 300
                            },
                            showUserLocation: true,
                            zoomLevel: 11,
                            center: {
                                lon: 116.4021310000,
                                lat: 39.9994480000
                            },
                            fixedOn: api.frameName,
                            fixed: true
                        }, function (ret, err) {
                            if (ret.status) {
                                // 获取经纬度
                                aMap.getLocation(function (ret1, err1) {
                                    if (ret1.status) {
                                        vm.currentLon = ret1.lon
                                        vm.currentLat = ret1.lat
                                        console.log("当前经纬度：" + vm.currentLon + "," + vm.currentLat)
                                        vm.searchNear()
                                        // 根据经纬度获取城市
                                        aMap.getNameFromCoords({ lon: ret1.lon, lat: ret1.lat }, (ret2, err2) => {
                                            if (ret2.status && ret2.address) {
                                                vm.selectedCityName = ret2.state
                                            } else {
                                                vm.selectedCityName = '上海市'
                                                var location = {
                                                    name: '上海市',
                                                    location: '121.164311' + ',' + '31.046996',
                                                    id: 10796 // 上海市id为10796，从后端开发人员获取到
                                                }
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    },
                },
            })

            api.addEventListener({
                name: 'filterDistrict'
            }, function (ret) {
                console.log(JSON.stringify(ret))
                vm.selectedCityName = ret.value.city.name;
                vm.onSearchChange()
                //  api.sendEvent({ name: 'changeLocation' });
            })
        }
    </script>
</body>

</html>